import React from 'react';
import { useMediaQuery } from '../../hooks/useMediaQuery';
import { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';

export interface HideProps {
  /**
   * 在指定断点隐藏
   */
  breakpoint?: Breakpoint | Breakpoint[];

  /**
   * 自定义媒体查询
   */
  when?: string;

  /**
   * 子元素
   */
  children: React.ReactNode;
}

/**
 * Hide 组件
 * 在满足条件时隐藏子组件
 *
 * @example
 * <Hide breakpoint="mobile">
 *   <DesktopOnlyFeature />
 * </Hide>
 *
 * @example
 * <Hide when="(max-width: 767px)">
 *   <NotForMobile />
 * </Hide>
 */
export const Hide: React.FC<HideProps> = ({ breakpoint, when, children }) => {
  const currentBreakpoint = useBreakpoint();
  const customMatch = useMediaQuery(when || '');

  // 使用自定义媒体查询
  if (when) {
    return customMatch ? null : <>{children}</>;
  }

  // 使用断点
  if (breakpoint) {
    const breakpoints = Array.isArray(breakpoint) ? breakpoint : [breakpoint];
    const shouldHide = breakpoints.includes(currentBreakpoint);
    return shouldHide ? null : <>{children}</>;
  }

  // 默认显示
  return <>{children}</>;
};

Hide.displayName = 'Hide';
